<template>
  <div>
    <el-card>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>会员管理</el-breadcrumb-item>
        <el-breadcrumb-item>付费会员卡</el-breadcrumb-item>
      </el-breadcrumb>
      <h3>付费会员卡</h3>
    </el-card>
    <el-card>
      <el-row>
        <el-col :span="12">
          <el-row>
            <el-col :span="7">
              <div class="ju-li">会员卡名称</div>
            </el-col>
            <el-col :span="3">
              <span class="ju" >{{cjhu.id}}</span>
            </el-col>
          </el-row>
          <el-row class="shangxia">
            <el-col class="ju-li" :span="3"> 背景色: </el-col>
            <el-col :span="10">
              <div class="beijing"></div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <div class="ju-li">开卡条件</div>
            </el-col>
            <el-col :span="3">
              <span class="ju">{{cjhu.name}}</span>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <div class="ju-li">有效期</div>
            </el-col>
            <el-col :span="3">
              <span class="ju">{{cjhu.validity}}</span>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <div class="ju-li">续卡提醒</div>
            </el-col>
            <el-col :span="7">
              <span class="ju">{{cjhu.balance}}</span>
            </el-col> </el-row
          ><el-row>
            <el-col :span="6">
              <div class="ju-li">会员权益</div>
            </el-col>
            <el-col :span="7">
              <span class="ju">{{cjhu.rights}}</span>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="6" :offset="3">
              <div class="ju-li">商品折扣</div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6" :offset="3">
              <div class="ju-li">积分翻倍</div>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="3" :offset="5">
              <el-button type="primary" @click="bianji(cjhu.id)"
                >编辑会员卡信息</el-button
              >
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="10">
          <div class="bunt">
            <el-row>
              <el-col class="mcnt">超级会员</el-col>
              <el-col>
                <el-row>
                  <el-col>有效期至2020年9月10号到期</el-col>
                  <el-col>
                    预估每年为你节省<span class="zhiti-dx">888</span>
                    /年</el-col
                  >
                </el-row>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      cjhu:{},
      percentage: "",
      checked: true,
      a: true,
      abc: true,
      abc: true,
      abcd: true,
      abcde: true,
      abcdef: true,
      abcdefg: true,
      input2: "",
      input1: "",
      input: "",
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
    };
  },
  //页面跳转
  methods: {
    bianji(id) {
      console.log(id)
      this.$router.push({path:"/home/Card",query:{id:id}});

    },
  },

  //页面渲染
    mounted(){
       this.$axios({
         url:"/vip/payCard/list",
       }).then((res)=>{
         console.log(res);
           if (res.data.code ==0) {
             console.log(res.data.data[0]);
           this.cjhu=res.data.data[0]
        } else {
          this.$message.error("请求失败");
        }
       })
    }
};
</script>
 <style lang="less" scoped>
.mcnt {
  font-size: 25px;
}
.beijing {
  height: 35px;
  width: 160px;
  background: rgb(240, 154, 56);
}
.tj {
  margin-top: 10px;
}
.mcn {
  margin-block: 10px;
}
.ti1 {
  margin-left: 300px;
}
.ju-li {
  margin-left: 60px;
  line-height: 45px;
}
.ju {
  line-height: 45px;
}
// .ju-1{
//   margin-left: 60px;
// }

.shangxia {
  margin-top: 10px;
}
.djmc {
  width: 300px;
}
.hueyan {
  margin: 10px;
}
.zhiti-dx {
  font-size: 25px;
}
.bunt {
  width: 350px;
  height: 200px;
  background: rgb(240, 154, 56);
  border-radius: 20px;
  margin-left: 100px;
  color: #fff;
  > .el-row > .el-col:first-child {
    margin: 30px 20px;
  }
  > .el-row > .el-col:last-child {
    margin-top: 25px;
    margin-left: 20px;
  }
}
</style>